<template>
  <div>
    <!-- <h2>{{ firstName }}--{{ lastName }}</h2> -->
    <h2>{{ fullName }}</h2>
    <button @click="changeName">修改firstName</button>
  </div>
</template>

<script>
import { ref, computed } from "vue"; 
export default {
  setup() {
    const firstName = ref("Kobe");
    const lastName = ref("Bryant");

    //1.用法一：传入一个getter函数
    // computed的返回值是一个ref对象
    /* const fullNmae = computed(() => {
      let resultFirstName = firstName.value;
      return resultFirstName + " " + lastName.value;
    }); */

    // 2.用法二：传入一个对象，对象包涵getter/setter
    const fullName = computed({
      get: () => {
        return firstName.value + " " + lastName.value;
      },
      set: (newValue) => {
        const names = newValue.split(" ");
        firstName.value = names[0];
        lastName.value = names[1];
      }
    });

    const changeName = () => {
      // firstName.value = "James";
      fullName.value = "peng fan"
    };
    return {
      firstName,
      lastName,
      fullName,
      changeName,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>